/* eslint-disable vue/no-parsing-error */
<template>
    <div class="addGoods-container">
        <b-container class="bv-example-row row-box">
            <!-- 时间区域 -->
            <div class="mean-item">
                <b-row>
                    <b-col cols="12" sm="12" md="12" lg="12">
                        <Menu mode="horizontal" :theme="theme1" active-name="1">
                            <!-- 使用AntDesign时间组件 -->
                            <!-- 时间格式 年月日 -->
                            <span class="tag-title">时间</span>
                            <Row span="7">
                                <i-col span="5" :xs="9" :sm="9" :md="5" :lg="5" :xl="4">
                                    <a-date-picker @change="startChange" placeholder="开始时间" />
                                </i-col>
                                <i-col span="1" style="text-align: center">-</i-col>
                                <i-col span="5" :xs="9" :sm="9" :md="5" :lg="5" :xl="4">
                                    <a-date-picker @change="endChange" placeholder="结束时间" />
                                </i-col>
                            </Row>
                        </Menu>
                    </b-col>
                </b-row>
            </div>
            <!-- 价格区域 -->
            <div class="mean-item">
                <b-row>
                    <b-col cols="12" sm="12" md="12" lg="12">
                        <Menu mode="horizontal" :theme="theme1" active-name="1">
                        <span class="tag-title">价格</span>
                            <Row span="7">
                                <i-col span="3" :xs="9" :sm="9" :md="5" :lg="5" :xl="4">
                                    <Input v-model="lowPrice" placeholder="￥" @on-blur="changeLowPrice(lowPrice)" clearable/>
                                </i-col>
                                <i-col span="1" style="text-align: center">-</i-col>
                                <i-col span="3" :xs="9" :sm="9" :md="5" :lg="5" :xl="4">
                                    <Input v-model="topPrice" placeholder="￥" @on-blur="changeTopPrice(topPrice)" clearable/>
                                </i-col>
                            </Row>
                    </Menu>
                    </b-col>
                </b-row>
            </div>
            <!-- 类别区域 -->
            <div class="mean-item">
                <b-row>
                    <b-col cols="12" sm="12" md="12" lg="12">
                        <Menu mode="horizontal" :theme="theme1" active-name="" @on-select="selectType">
                            <span class="tag-title">类别</span>
                            <MenuItem name="">
                                全部
                            <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                            <Submenu :name="item.tId" v-for="(item,i) in types" :key="i">
                                <template slot="title">
                                    {{item.tName}}
                                </template>
                                <!-- 根据item.child遍历二层循环 -->
                                <MenuItem :name="itemTwo.tId" v-for="(itemTwo,index) in item.child" :key="index">{{itemTwo.tName}}
                                <!-- eslint-disable-next-line vue/no-parsing-error -->
                                </MenuItem>
                            </Submenu>
                        </Menu>
                    </b-col>
                </b-row>
            </div>
            <!-- 商品列表区域 -->
            <div class="one-floor">
                <b-row>
                    <b-col cols="6" sm="6" md="3" lg="3" v-for="item in wantGoodsList" :key="item.wgId">
                        <Card>
                            <div class="box-item">
                                <router-link :to="'/wantGoodsInfo/' + item.wgId">
                                    <img :src="item.mainPic">
                                </router-link>
                                <div class="box-item-text">
                                    <h5><router-link :to="'/wantGoodsInfo/' + item.wgId" class="goods-title">{{item.wgTitle}}
                                    </router-link></h5>
                                    <div class="goods-item">
                                        <span class="goods-price">￥{{item.wgPrice}}</span>
                                        <span class="view-num"><Icon type="ios-eye" />{{item.wgViewNum}} 浏览</span>
                                    </div>
                                    <div class="user-info">
                                        <router-link :to="'/userInfo/' + item.users.uId">
                                        <img :src="item.users.uAvatar" alt=""></router-link>
                                        <p class="user-name">{{item.users.uName}}</p>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </b-col>
                </b-row>
            </div>
            <div class="page-all">
                <Page :total="allPages.total" :page-size="pageSize" :current="pageNum" @on-change="changePage"  />
            </div>
        </b-container>
    </div>
</template>

<script>

export default {
  name: 'goodsList',
  data () {
    return {
      theme1: 'light',
      startTime: '', // 开始时间
      endTime: '', // 结束时间
      lowPrice: '', // 最低价格
      topPrice: '', // 最高价格
      wgTid: '', // 类别id
      types: [], // 商品类别
      pageNum: 1,
      pageSize: 4,
      allPages: [],
      wantGoodsList: [] // 求购商品列表
    }
  },
  created () {
    this.findOneTypes()
    this.queryDynamic(this.startTime, this.endTime, this.lowPrice, this.topPrice, this.wgTid, this.pageNum)
  },
  methods: {
    // 开始时间
    startChange (date, dateString) {
      this.startTime = dateString
      this.pageNum = 1
      this.queryDynamic(this.startTime, this.endTime, this.lowPrice, this.topPrice, this.wgTid, this.pageNum)
    },
    // 结束时间
    endChange (date, dateString) {
      this.endTime = dateString
      this.pageNum = 1
      this.queryDynamic(this.startTime, this.endTime, this.lowPrice, this.topPrice, this.wgTid, this.pageNum)
    },
    // 最低价格
    changeLowPrice (lowPrice) {
      this.pageNum = 1
      this.queryDynamic(this.startTime, this.endTime, lowPrice, this.topPrice, this.wgTid, this.pageNum)
    },
    // 最高价格
    changeTopPrice (topPrice) {
      this.pageNum = 1
      this.queryDynamic(this.startTime, this.endTime, this.lowPrice, topPrice, this.wgTid, this.pageNum)
    },
    // 选择类别
    selectType (name) {
      this.pageNum = 1
      this.queryDynamic(this.startTime, this.endTime, this.lowPrice, this.topPrice, name, this.pageNum)
    },
    // 先查询所有一级商品类别
    findOneTypes () {
      this.$axios({
        url: 'types/findOneLevels',
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          this.types = res.data.list
          // 遍历一级类别，根据父级类别id查询它的二级类别
          this.types.forEach(item => {
            this.$axios({
              url: 'types/findTwoLevels/' + item.tId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                this.$set(item, 'child', res.data.list)
              }
            })
          })
        }
      })
    },
    // 根据时间区间、价格区间、类别动态分页查询求购商品列表
    queryDynamic (startTime, endTime, lowPrice, topPrice, wgTid, pageNum) {
      this.$axios({
        url: 'wantGoods/queryDynamic',
        method: 'get',
        params: {
          startTime,
          endTime,
          lowPrice,
          topPrice,
          wgTid,
          pageNo: pageNum,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.wantGoodsList = res.data.pageInfo.list
          this.allPages = res.data.pageInfo
          this.wantGoodsList.forEach(item => {
            this.$axios({
              url: 'wantGoodsPicture/findMainPicByGoodsId/' + item.wgId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.wgpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 改变页码
    changePage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNum = index
      this.queryDynamic(this.startTime, this.endTime, this.lowPrice, this.topPrice, this.wgTid, this.pageNum)
    }
  }

}
</script>
<style scoped>
.page-all{
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.row-box{
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
}
.my-goodsInfo {
    margin-top: 20px;
}
.mean-item .ivu-menu-horizontal .ivu-menu-item,.mean-item .ivu-menu-horizontal .ivu-menu-submenu {
    padding: 0 5px;
}
.tag-title{
    height: 60px;
    line-height: 60px;
    display: block;
    color: #515a6e;
    font-size: 12px;
    float: left;
    margin-right: 10px;
}
.ivu-menu-item{
    font-size: 12px;
}
.ivu-menu{
    font-size: 12px;
}
.ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item {
    font-size: 12px!important;
}
.one-floor{
    margin-top: 50px;
}
.ivu-card{
    margin-bottom: 15px;
}
.box-item>a{
    display: block;
}
.box-item>a>img{
    width: 100%;
    height: auto;
}

.box-item-text h5{
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-top: 5px;
    height: 40px;
}
.box-item-text h5 a{
    color:#333;
}
.box-item-text h5 a:hover{
    text-decoration: none;
    color:#111;
}
.goods-item{
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
}
.goods-price{
    color:#f30;
}
.goods-price-two{
    color:#fff;
    background-color: #e1251b;
    border:1px solid #e1251b;
    display: inline-block;
    border-radius: 5px;
    font-size: 14px;
    padding: 2px 10px;
}
.view-num{
    color:#5a5a5a;
    font-size: 11px;
}
.user-info{
    display:flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.user-info img{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 4px #e2e2e2;
    margin-right: 10px;
}
.user-info .user-name{
    display: inline-block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color:#747474;
    margin-bottom: 0;
}
.ivu-date-picker .ivu-select-dropdown{
    z-index: 9000 !important;
    position:absolute;
}
</style>
